<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 管理系统大布局 - Layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="./js/jquery-2.1.4.min.js"></script>
    <script src="./layui-v2.6.8/layui/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div class="layui-fluid">
        <!-- 内容主体区域 -->
        <!-- 标题 时间 tags 正文 字数-->
        <div class="layui-field-title">
            <b><i style="text-decoration: none;color: black;font-size: 36px;"><a href="#" id="title"></a></i></b>
        </div>
        <div class="layui-icon">
            <span class="layui-icon-date" aria-hidden="true"></span>
            <span style="color: #8D8D8D;margin-left: 5px" id="date"></span></div>
        <div class="tags" style="border: 1px" id="tags">
        </div>
        <div class="layui-card layui-panel">
            <div class="layui-card-body" id="content">

            </div>
        </div>
    </div>

    <div class="layui-footer"style="color: #8D8D8D" id="statistics">
        <!-- 底部固定区域 -->
        字数：10729
    </div>
</div>
<script type="text/javascript">
    var diaryId = getId();
    // console.log("diaryId", diaryId);
    var diaryData ={
        statistics:0,
        userId: '123456',
        diaryId: '123456',
        title: 'title',
        content: 'content',
        datePublished: '1900-1-1',
        tags: ['无']
    };

    // setPage();
    getUserDiary();
    /**
     * 部署页面
     */
    function setPage() {
        // getUserDiary();
        setPageTitle();
        setTitle();
        setDatePublished();
        setTags();
        setContent();
        contentCount();
        setStatistics();
    }
    /**
     * 得到日记
     */
    function getUserDiary() {
        $.ajax({
            url:'/diaries/'+diaryId,
            type:'GET',
            data:'',
            success: function (result) {
                result = result.extend.diary;
                var tagss = result.tagList.concat();
                //得到时间
                var timeStamp = result.datePublished,
                    correctTime = getCorrectTime(timeStamp);
                diaryData = {
                    userId: result.userId,
                    diaryId: result.id,
                    title: result.title,
                    content: result.content,
                    datePublished: correctTime,
                    tags:tagss
                }
                setPage();
            },
            error:function () {
                this.diaryData = {
                    title: 'unknown',
                    content: 'unknown',
                }
                console.log('日记不存在');
            }
        });
    }

    /**
     * 转换时间戳
     * @param timeStamp
     * @returns 时间{string}
     */
    function getCorrectTime(timeStamp) {
        var date = new Date(timeStamp.valueOf()),
            year = date.getFullYear() + '-',
            month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-',
            day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()),
            hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":",
            minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':',
            second = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
            return year+month+day+" "+hour+minute+second;
    }

    function setPageTitle() {
        document.title = diaryData.title;
    };
    function setTitle() {
        document.getElementById("title").innerHTML = diaryData.title;
    };
    function setDatePublished() {
        document.getElementById("date").innerHTML = diaryData.datePublished;
    };
    function setTags() {
        for(let i =0;i<diaryData.tags.length;i++){
            var tag = document.createElement('a');
            tag.href="./search.html";
            tag.className='tag';
            tag.innerHTML=diaryData.tags[i].tagName;
            document.getElementById("tags").appendChild(tag);
        }
    };
    function setContent() {
        document.getElementById("content").innerHTML = diaryData.content;
    }
    function contentCount() {
        var countE = diaryData.content.length;
        var countC = 0;
        var CJK = diaryData.content.match(/[^\x00-\xff]/g);
        var enter = diaryData.content.match(/\r\n/g);
        if (CJK != null) countC += CJK.length;
        if (enter != null) countC -= enter.length;
        this.diaryData.statistics = countE + countC;
    }
    function setStatistics() {
        document.getElementById("statistics").innerHTML = '字数:'+diaryData.statistics;
    }
    function getId() {
        // console.log(location.href);
        var id = location.href.split("=")[1];
        // console.log("id", id);
        return id;
    }
</script>

</body>
</html>